<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <div style="margin-bottom:18px;">
            <el-input style="width: 13%" v-model="queryForm.menuName" placeholder="菜单名称"></el-input>
            <el-button @click="handleQuery">查询</el-button>
            <el-button v-if="button.add" @click="handleAdd">新增</el-button>
        </div>

        <el-table :data="tableData" row-key="id" :row-style="{height:'40px'}" :cell-style="{padding:'0px'}" style="font-size: 14px" border>
            <el-table-column prop="menuName" label="菜单名称"></el-table-column>
            <el-table-column prop="url" label="URL"></el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
            <el-table-column prop="icon" label="图标"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button v-if="button.add" type="text" @click="handleAdd(scope.row)">新增</el-button>
                    <el-button v-if="button.update" type="text" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button v-if="button.delete" type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
			return {
                tableData: [],
                button: {
                    add: false,
                    update: false,
                    delete: false
                },
                queryForm: {
                    menuName: ''
                }
			}
        },
        created() {
            this.handleQuery();
			let sysButtons = JSON.parse(localStorage.getItem("jsbb-sysButtons"));
			this.button.add = sysButtons.indexOf("/sys/menu/add") > -1;
			this.button.update = sysButtons.indexOf("/sys/menu/update") > -1;
			this.button.delete = sysButtons.indexOf("/sys/menu/delete") > -1;
        },
        methods: {
            handleQuery() {
                let queryParam = {
                    menuName:this.queryForm.menuName
                };
                service.post('/sys/menu/list', queryParam)
                .then((res) => {
                    if (res.code == '0000') {
                        this.tableData = res.data;
                    }
                });
            },
            handleDelete(row) {
                deleteById('/sys/menu/delete/' + row.id, this);
            },
            handleAdd(row) {
                if (row.id) {
                    openPage('新增菜单', '/sys/menuAdd/index?parentId=' + row.id, this);
                } else {
                    openPage('新增菜单', '/sys/menuAdd/index', this);
                }
            },
            handleUpdate(row) {
                openPage('修改菜单', '/sys/menuUpdate/index?id=' + row.id, this);
            }
        }
    });
</script>
</html>
